<template>
	<view class="page">
		<view class="count-box">
			<view class="title">任务统计：</view>
			<view class="count-nav-box">
				<view class="count-nav-item" :class="{'selected' : tasknavselected == item.id}"
					v-for="(item,index) in tasknavList" :key="item.id" @click="tasknavChange(item.id)">
					{{item.name}}
				</view>
			</view>
			<view class="task-echart">
				<uni-echarts class="ec-canvas" id="chart-pie" ref="canvas-pies" canvas-id="chart-pie" :ec="taskoptions">
				</uni-echarts>
			</view>
		</view>
		<view class="working-hour-box" v-if="countInfo[workhournavselected]">
			<view class="title">
				工时统计：
			</view>
			<view class="working-hour-tab-box">
				<view class="tab-item" :class="{'selected' : workhournavselected == item.id}"
					v-for="(item,index) in workhourtabList" :key="item.id" @click="workingHournavChange(item.id)">
					{{item.name}}
				</view>
			</view>
			<view class="work-hour-count-box">
				<view class="work-hour-item">
					<view class="num">
						{{countInfo[workhournavselected].expectedStandardHour}}
					</view>
					<view class="desc">
						预计标准工时
					</view>
				</view>
				<view class="work-hour-item">
					<view class="num">
						{{countInfo[workhournavselected].expectedHour}}
					</view>
					<view class="desc">
						预计工时
					</view>
				</view>
				<view class="work-hour-item">
					<view class="num">
						{{countInfo[workhournavselected].systemStatisticalTime}}
					</view>
					<view class="desc">
						系统统计消耗工时
					</view>
				</view>
				<view class="work-hour-item">
					<view class="num" style="color:#409eff;">
						{{countInfo[workhournavselected].approvedStandardHour}}
					</view>
					<view class="desc">
						核定核准工时
					</view>
				</view>
				<view class="work-hour-item">
					<view class="num" style="color:#409eff;">
						{{countInfo[workhournavselected].plannedHour}}
					</view>
					<view class="desc">
						计划工时
					</view>
				</view>
				<view class="work-hour-item">
					<view class="num" style="color:#f69f0a;">
						{{countInfo[workhournavselected].actualHour}}
					</view>
					<view class="desc">
						实际工时
					</view>
				</view>
			</view>

		</view>
		<view class="consume-count-box">
			<view class="title">
				消耗统计：
			</view>
			<view class="consume-tab-box">
				<view class="tab-item" :class="{'selected' : consumeselected == item.id}"
					v-for="(item,index) in consumeTabList" :key="item.id" @click="spendnavChange(item.id)">
					{{item.name}}
				</view>
			</view>
			<view class="EmployeeList-box" v-if="consumeselected == 3">
				<view class="Employee-item" @click="EmployeenavChange(item.id)" :class="{'selected':userid == item.id}"
					v-for="(item,index) in EmployeeList" :key="item.id">
					{{item.userName}}
				</view>
			</view>
			<view class="consume-chart">
				<uni-echarts class="ec-canvas" id="chart-line" ref="canvas-line" canvas-id="chart-line"
					:ec="consumeoptions">
				</uni-echarts>
			</view>
		</view>
		<view class="budget-count-box">
			<view class="title">
				预算成本:
			</view>
			<view class="table-box">
				<view class="table-row">
					<view class="table-item title-box">
						<text class="title">人力成本</text>
					</view>
					<view class="table-item value-box">
						<text class="sign">
							￥
						</text>
						<text class="money">
							{{countInfo.cost}}
						</text>
						<text class="company">/时</text>
					</view>
					<view class="table-item title-box">
						<text class="title">预算</text>
					</view>
					<view class="table-item value-box">
						<text class="sign">
							￥
						</text>
						<text class="money">
							{{countInfo.budget}}
						</text>
					</view>
				</view>
				<view class="table-row">
					<view class="table-item title-box">
						<text class="title">差旅费</text>
					</view>
					<view class="table-item value-box">
						<text class="sign">
							￥
						</text>
						<text class="money">
							{{countInfo.travelExpenses}}
						</text>

					</view>
					<view class="table-item title-box">
						<text class="title">物料费</text>
					</view>
					<view class="table-item value-box">
						<text class="sign">
							￥
						</text>
						<text class="money">
							{{countInfo.materialExpenses}}
						</text>
					</view>
				</view>
				<view class="table-row">
					<view class="table-item title-box">
						<text class="title">其他费用</text>
					</view>
					<view class="table-item value-box">
						<text class="sign">
							￥
						</text>
						<text class="money">
							{{countInfo.otherExpenses}}
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
<!--	</view>-->
</template>

<script>
	import * as api from '@/utils/api.js';
	import uniEcharts from '@/components/uni-echarts/uni-echarts';
	export default {
		components: {
			uniEcharts
		},
		props: {
			info: {
				type: Object,
				default: {}
			},
		},
		data() {
			return {
				userid: null, //当前选中用户id
				tasknavselected: 1, // 任务统计
				tasknavList: [ // 任务统计导航列表
					{
						id: 1,
						name: '全部任务'
					},
					{
						id: 2,
						name: '最末级任务'
					},
				],
				countInfo: {}, // 统计信息
				taskoptions: {
					option: {

						tooltip: {
							trigger: 'item'
						},
						legend: {
							top: '18%',
							width: '30%',
							right: '5%',
							textStyle: { //图例文字的样式
							    fontSize: 14
							},
							// formatter: '{name}',
						},
						grid: {
							width: '100%',
							height: '100%',
							left: '0%',
						},
						series: [{
							name: '',
							type: 'pie',
							color: ['#409eff', '#f04113', '#f9c803', '#5a69e8', '#70b603', '#d6e4ec', '#afb5b9'],
							selectedOffset: 0,
							avoidLabelOverlap: false,
							hoverAnimation: false,
							radius: ['40%', '70%'],
							center: ['30%', '50%'],

							labelLine: {
								show: false
							},
							label: {
								show: true,
								position: 'center',
								formatter: '',

								textStyle: { //图例文字的样式
								    color: 'black',
								},
							},
							emphasis: {
								scale: false,
								label: {
									show: false,
									backgroundColor:'white',
								},
							},
							data: [{
									value: 0,
									name: '执行中',
								},
								{
									value: 0,
									name: '逾期',

								},
								{
									value: 0,
									name: '异常完成',

								},
								{
									value: 0,
									name: '正常完成',

								},
								{
									value: 0,
									name: '完成提报',

								},
								{
									value: 0,
									name: '未开始',

								},
								{
									value: 0,
									name: '已暂停',

								}
							]
						}]
					}
				},
				workhournavselected: 'firstTaskTime', // 工时统计导航选中项
				workhourtabList: [{
						id: 'firstTaskTime',
						name: '一级任务'
					},
					{
						id: 'secondTaskTime',
						name: '二级任务'
					},
					{
						id: 'thirdTaskTime',
						name: '三级任务'
					},
					{
						id: 'finalTaskTime',
						name: '最末级任务'
					},
				],
				consumeselected: 1, // 消耗统计导航选中项
				EmployeeList: [], // 项目人员列表
				consumeTabList: [{
						id: 1,
						name: '进展情况'
					},
					{
						id: 2,
						name: '剩余工时'
					},
					{
						id: 3,
						name: '人力成本'
					},
				],
				consumeoptions: {
					option: {
						title:{
							text:'完成比例%'
						},
						color: ['#0f8fec', '#ee4f17'],
					 tooltip: {
							trigger: 'axis',
							position: ['40%', '50%'],
							formatter:'',
						},
						legend: {
							data: [],
							right: '0',
							textStyle: { //图例文字的样式
							    fontSize: 14
							},
						},
						grid: {
							left: '5%',
							right: '5%',
							bottom: '5%',
							width: '85%',
							height: '80%',
							containLabel: true,
							textStyle: { //图例文字的样式
							    fontSize: 14
							},
						},
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data: []
						},
						yAxis: {
							type: 'value'
						},
						series: []
					}
				}
			}
		},
		mounted() {
			let that = this;
			this.$nextTick(function() {
				that.projectStatistics();
				that.projectDiagramEmployeeList();
			})

		},
		methods: {
			/**
			 * 项目甘特图人员列表
			 */
			projectDiagramEmployeeList: function() {
				let that = this;
				let userinfo = getApp().globalData.userInfo;
				api.projectDiagramEmployeeList({
					projectId: this.info.id
				}).then(res => {
					this.EmployeeList = res.data;
					let data = res.data.filter(result => {
						return userinfo.id == result.userId;
					})
					if (data.length > 0) {
						this.userid = data[0].id;
					} else {
						this.userid = res.data[0].id;
					}
				})
			},
			/**
			 * 工时统计导航改变触发事件
			 */
			workingHournavChange: function(id) {
				let that = this;
				this.workhournavselected = id;
			},
			/**
			 * 任务统计导航改变触发事件
			 */
			tasknavChange: function(id) {
				let that = this;
				this.tasknavselected = id;
				let countInfo = this.countInfo;
				if (id == 1) {
					that.taskoptions.option.series[0].label.formatter = ['全部任务数',countInfo.totalTaskCount.countTotal].join('\n');
					that.taskCount(countInfo.totalTaskCount);
				} else if (id == 2) {
					that.taskoptions.option.series[0].label.formatter = ['最末级任务数',countInfo.finalTaskCount.countTotal].join('\n');
					that.taskCount(countInfo.finalTaskCount);
				}
			},

			/**
			 * 消耗统计导航改变触发事件
			 */
			spendnavChange: function(id) {
				let consumeoptions = this.consumeoptions.option;
				consumeoptions.xAxis.data = [];
				consumeoptions.series[0].data = [];
				consumeoptions.series[1].data = [];
				this.consumeoptions.option = consumeoptions;
				if (id == 1) {
					this.projectProgress();
				} else if (id == 2) {
					this.projectRemainingWork();
				} else if (id == 3) {
					this.projectLaborCost();
				}
				this.consumeselected = id;
			},
			/**
			 * 人力成本成员导航触发事件
			 */
			EmployeenavChange: function(id) {
				this.userid = id;
				let consumeoptions = this.consumeoptions.option;
				consumeoptions.xAxis.data = [];
				consumeoptions.series[0].data = [];
				consumeoptions.series[1].data = [];
				this.consumeoptions = {
					option: consumeoptions
				};
				this.projectLaborCost();
			},
			/**
			 * 初始化任务统计接口
			 */
			projectStatistics: function() {
				let that = this;
				let taskoptions = this.taskoptions.option;
				api.projectStatistics({
					projectId: this.info.id
				}).then(res => {
					that.taskoptions.option.series[0].label.formatter = ['全部任务数',res.data.result.totalTaskCount.countTotal].join('\n');
					that.taskCount(res.data.result.totalTaskCount);
					that.taskoptions = {
						option: taskoptions
					};
					that.countInfo = res.data.result;

					that.projectProgress();
				})
			},
			/**
			 * 人力成本统计
			 */
			projectLaborCost: function() {
				let consumeoptions = this.consumeoptions.option;
				api.projectLaborCost({
					projectId: this.info.id,
					userId: this.userid
				}).then(res => {
					consumeoptions.title.text = '工资';
					consumeoptions.legend.data = [];
					consumeoptions.series = [];
					consumeoptions.legend.data.push('已完成');
					consumeoptions.legend.data.push('未完成');
					consumeoptions.series.push({
						name: '已完成',
						type: 'line',
						stack: 'Total',
						connectNulls:true,
						data: []
					});
					consumeoptions.series.push({
						name: '未完成',
						type: 'line',
						stack: 'Total',
						connectNulls:true,
						data: []
					});
					consumeoptions.tooltip.formatter = function(params){
						console.log('params',params);
						let text = '';
						params.forEach(item =>{
							if(params.length < 2 && item.seriesName == '已完成'){
								text = text + item.seriesName + '：￥' + item.value +'/'+res.data.result[params[0].dataIndex].completedPay.hour+ 'h';
							}
							if(params.length < 2 && item.seriesName == '未完成'){
								text = text + item.seriesName + '：￥' + item.value +'/'+res.data.result[params[0].dataIndex].unCompletedPay.hour+ 'h';;
							}
						})
						if(params.length  == 2){
							text = text + params[0].seriesName + '：￥' + params[0].value+'/'+res.data.result[params[0].dataIndex].completedPay.hour+ 'h\n\n';
							text = text + params[1].seriesName + '：￥' + params[1].value+'/'+res.data.result[params[0].dataIndex].unCompletedPay.hour+'h';
						}
						return text;
					};
					res.data.result.forEach(result => {
						consumeoptions.xAxis.data.push(result.date);
						consumeoptions.series[0].data.push(result.completedPay.pay);
						consumeoptions.series[1].data.push(result.unCompletedPay.pay);
					})
					this.consumeoptions = {
						option: consumeoptions
					};
					this.$refs['canvas-line'].updateOption(consumeoptions);

				})
			},
			/**
			 * 进展情况统计
			 */
			projectProgress: function() {
				api.projectProgress({
					projectId: this.info.id
				}).then(res => {
					let consumeoptions = this.consumeoptions.option;
					consumeoptions.title.text = '完成比例%';
					consumeoptions.tooltip.formatter = function(params){
						console.log('params',params);
						let text = '';
						params.forEach(item =>{
							if(params.length < 2 && item.seriesName == '已完成'){
								text = text + item.seriesName + '：' + item.value + '%'+ '\n'+ '工时：'+res.data.result[item.dataIndex].completedProgress.hour + 'h';
							}
							if(params.length < 2 && item.seriesName == '未完成'){
								text = text + item.seriesName + '：' + item.value + '%'+ '\n'+ '工时：'+res.data.result[item.dataIndex].unCompletedProgress.hour + 'h';
							}
						})
						if(params.length  == 2){
							text = text + params[0].seriesName + '：' + params[0].value + '%'+ '\n'+ '工时：'+res.data.result[params[0].dataIndex].completedProgress.hour + 'h\n\n';
							text = text + params[1].seriesName + '：' + params[1].value + '%'+ '\n'+ '工时：'+res.data.result[params[0].dataIndex].unCompletedProgress.hour + 'h';
						}
						return text;
					};
					consumeoptions.legend.data = [];
					consumeoptions.series = [];
					consumeoptions.legend.data.push('已完成');
					consumeoptions.legend.data.push('未完成');
					consumeoptions.series.push({
						name: '已完成',
						type: 'line',
						stack: 'Total',
						connectNulls:true,
						data: []
					});
					consumeoptions.series.push({
						name: '未完成',
						type: 'line',
						stack: 'Total',
						connectNulls:true,
						data: []
					});
					for (let i = 0; i < res.data.result.length; i++) {
						consumeoptions.xAxis.data.push(res.data.result[i].date);
						
						consumeoptions.series[0].data.push(res.data.result[i].completedProgress.progress);
						consumeoptions.series[1].data.push(res.data.result[i].unCompletedProgress.progress);
					}
					console.log(consumeoptions);
					this.$refs['canvas-line'].updateOption(consumeoptions);
					this.consumeoptions.option = consumeoptions;
				})
			},
			/**
			 *  剩余工时统计
			 */
			projectRemainingWork: function() {
				let consumeoptions = this.consumeoptions.option;
				api.projectRemainingWork({
					projectId: this.info.id
				}).then(res => {
					consumeoptions.title.text = '工时';
					consumeoptions.legend.data = [];
					consumeoptions.series = [];
					consumeoptions.legend.data.push('未开始');
					consumeoptions.legend.data.push('未完成');
					consumeoptions.series.push({
						name: '未开始',
						type: 'line',
						stack: 'Total',
						connectNulls:true,
						data: []
					});
					consumeoptions.series.push({
						name: '未完成',
						type: 'line',
						stack: 'Total',
						connectNulls:true,
						data: []
					});
					consumeoptions.tooltip.formatter = function(params){
						console.log('params',params);
						let text = '';
						params.forEach(item =>{
							if(params.length < 2 && item.seriesName == '未开始'){
								text = text + item.seriesName + '：' + item.value + 'h';
							}
							if(params.length < 2 && item.seriesName == '未完成'){
								text = text + item.seriesName + '：' + item.value + 'h';
							}
						})
						if(params.length  == 2){
							text = text + params[0].seriesName + '：' + params[0].value + 'h\n\n';
							text = text + params[1].seriesName + '：' + params[1].value+'h';
						}
						return text;
					};
					res.data.result.forEach(result => {
						consumeoptions.xAxis.data.push(result.date);
						consumeoptions.series[0].data.push(result.unStartedRemainingWork);
						consumeoptions.series[1].data.push(result.unCompletedRemainingWork);
					})
					this.consumeoptions = {
						option: consumeoptions
					};
					this.$refs['canvas-line'].updateOption(consumeoptions);
				})
			},
			/**
			 * 初始化任务统计
			 */
			taskCount: function(data) {
				let taskoptions = this.taskoptions.option;
				taskoptions.series[0].data[0].value = data.count1;
				taskoptions.series[0].data[1].value = data.count7;
				taskoptions.series[0].data[2].value = data.count6;
				taskoptions.series[0].data[3].value = data.count5;
				taskoptions.series[0].data[4].value = data.count3;
				taskoptions.series[0].data[5].value = data.count0;
				taskoptions.series[0].data[6].value = data.count2;
				this.taskoptions = {
					option: taskoptions
				};
				this.$refs['canvas-pies'].updateOption(taskoptions);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		margin: 0 20rpx;
		overflow: hidden;

		.task-echart {
			width: 100%;
			height: 500rpx;
			background-color: white;
		}

		.consume-chart {
			margin-top: 40rpx;
			width: 100%;
			height: 500rpx;
			background-color: white;
		}

		.ec-canvas {
			width: 100%;
			height: 100%;
		}

		.count-box {
			background-color: white;
			border-radius: 20rpx;
			padding: 20rpx;
			font-size: 28rpx;

			.title {}

			.count-nav-box {
				display: flex;
				width: 360rpx;
				line-height: 60rpx;
				background-color: #f2f2f2;
				border-radius: 60rpx;
				overflow: hidden;
				margin: 0 auto;

				.count-nav-item {
					width: 50%;
					text-align: center;
					font-size: 24rpx;
					line-height: 60rpx;
				}

				.selected {
					color: white;
					background-color: #409eff;
					border-radius: 60rpx;
				}
			}
		}

		.working-hour-box {
			margin-top: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			background-color: white;

			.title {
				font-size: 28rpx;
			}

			.working-hour-tab-box {
				width: calc(100% - 40rpx);
				box-sizing: border-box;
				margin: 20rpx;
				background-color: #f2f2f2;
				display: flex;
				line-height: 60rpx;
				font-size: 24rpx;
				border-radius: 60rpx;
			}

			.tab-item {
				text-align: center;
				width: calc(100% / 4);
			}

			.selected {
				color: white;
				background-color: #409eff;
				border-radius: 60rpx;
			}

			.work-hour-count-box {
				display: flex;
				flex-wrap: wrap;

				.work-hour-item {
					width: calc(100% / 3);
					text-align: center;
					padding: 20rpx 0;

					.num {
						font-size: 50rpx;
					}

					.desc {
						font-size: 24rpx;
						margin-top: 20rpx;
					}
				}
			}

		}

		.consume-count-box {
			padding: 20rpx;
			margin-top: 20rpx;
			background-color: white;

			.title {
				font-size: 28rpx;
			}

			.consume-tab-box {
				width: calc(100% - 200rpx);
				margin: 0 auto;
				margin-top: 20rpx;
				background-color: #f2f2f2;
				line-height: 60rpx;
				display: flex;
				font-size: 24rpx;
				border-radius: 60rpx;

				.tab-item {
					width: calc(100% / 3);
					text-align: center;
				}

				.selected {
					color: white;
					background-color: #409eff;
					border-radius: 60rpx;
				}
			}

			.EmployeeList-box {
				display: flex;
				justify-content: space-around;
				margin: 0 auto;
				margin-top: 20rpx;
				width: fit-content;
				border-radius: 60rpx;
				background-color: #f2f2f2;

				.Employee-item {
					padding: 0 20rpx;
					font-size: 24rpx;
					line-height: 60rpx;

				}

				.selected {
					color: white;
					background-color: #409eff;
					border-radius: 60rpx;
				}
			}
		}

		.budget-count-box {
			background-color: white;
			padding: 20rpx;
			box-sizing: border-box;
			margin: 20rpx 0;
			width: 100%;

			.table-box {
				display: table;
				width: calc(100% - 40rpx);
				margin: 20rpx;

				.table-row {
					display: table-row;
				}

				.table-item {
					display: table-cell;
					line-height: 70rpx;

					.title {
						font-size: 24rpx;

					}

					.sign {
						font-size: 20rpx;
						margin-left: 20rpx;
					}

					.money {
						font-size: 30rpx;
					}

					.company {
						font-size: 20rpx;
					}
				}

				.title-box {
					text-align: right;
				}

				.value-box {
					text-align: left;
				}

				.table-item:nth-child(3n) {
					padding-left: 80rpx;
				}
			}
		}
	}
</style>
